<template>
    <div class="wrapper">
       <div class="banner_header">
        <img :src="allData.bannerImg" alt="">
        <div class="left">
          <span class="iconfont">&#xe74a;</span>

        </div>
        <div class="bottom">
          <p class="tit_a"> <span class="iconfont">&#xe63b;</span>72</p>
          <p class="tit_b">{{allData.sightName}}</p>
        </div>
       </div>


    </div>
</template>

<script>
    export default {
        name: "Banner",
        props:{
            allData:Object
        }
    }
</script>

<style lang="stylus" scoped>
  .wrapper{
    .banner_header{
      position:relative;
      img{
        width:100%;
      }
      .left{
        position:absolute;
        top:.1rem;
        left:.1rem;
        border-radius:50%;
        background:#cacaca;
        width:.36rem;
        height:.36rem;
        text-align:center;
        line-height:.36rem;
        color:white;
      }
      .bottom{
        position:absolute;
        bottom:.1rem;
        left:.1rem;
        .tit_a{
          background:#cacaca;
          border-radius:.05rem;
          line-height:.14rem;
          padding:0 .04rem;
          font-size:.14rem;
          color:white;
          margin-bottom:.07rem;
          width:.4rem;
        }
        .tit_b{
          line-height:.2rem;
          color:white;
          font-size:.2rem;
          text-shadow:0 1px 2px rgba(0,0,0,0.70);
        }
      }
    }


  }
</style>
